import { useState } from "react";
import { Card, Avatar, Row, Col, Typography, Modal, Form, Input } from "antd";
import MyIcon from "@/components/icon";
import styles from './index.module.scss'
import classNames from "classnames/bind";

const cx = classNames.bind(styles)
const list = [
  {
    img: "https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png",
    title: "Ant Design",
    description:
      "在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的组件会被抽离成一套标准规范。",
    src: "https://ant-design.antgroup.com/index-cn"
  },
  {
    img: "https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png",
    title: "React",
    description:
      "React 应用程序是由 组件 组成的。一个组件是 UI（用户界面）的一部分，它拥有自己的逻辑和外观。组件可以小到一个按钮，也可以大到整个页面。",
    src: "https://zh-hans.react.dev/"
  },
  {
    img: "http://www.axios-js.com/logo.svg",
    title: "axios",
    description:
      "Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。",
    src: "https://www.axios-http.cn/docs/intro"
  },
  {
    img: "https://webpack.js.org/icon-square-small.9e8aff7a67a5dd20.svg",
    title: "Webpack",
    description:
      "本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容",
    src: "https://webpack.docschina.org/concepts/"
  },
  {
    img: "https://vitejs.cn/logo.svg",
    title: "Vite",
    description:
      "Vite 是一个超快的前端构建工具赋能下一代 Web 应用的发展",
    src: "https://cn.vite.dev/"
  }
];

const { Meta } = Card;

const dRules = [
  {
    required: true,
    message: "Please input your description!",
  },
  {
    min: 50,
    message: "The description must be more than 50 words!",
  },
];
const tRules = [
  {
    required: true,
    message: "Please input your title!",
  },
];
const iRules = [
  {
    required: true,
    message: "Please input your img!",
  },
];

const useCardPage= ()=> {
  const [dataList, setList] = useState(list);
  const [showModal, setShow] = useState(false);
  const [form] = Form.useForm();

  const show = () => {
    setShow(true);
  };
  const hide = () => {
    setShow(false);
  };
  const addList = () => {
    form.validateFields().then((values) => {
      setList([...dataList, values]);
      form.resetFields();
      hide();
    });
  };
  return { show, dataList, showModal, hide, addList, form };
}

const  CardPage = ()=> {
  const { show, showModal, addList, dataList, hide, form } = useCardPage();
  const linkToPage = (src:string)=>{
    window.open(src)
  }

  const handleIconClick = (e: React.MouseEvent) => {
    e.stopPropagation();  // 阻止事件冒泡
    console.log('这里要处理一点小逻辑');
    
  }

  return (
    <div className={cx("card-container")}>
      <Row gutter={[16, 16]}>
        {dataList.map((item) => (
          <Col span={6} key={item.title} >
            <Card
              hoverable
              actions={[
                <div onClick={handleIconClick}>
                  <MyIcon type="icon_edit" className={cx("icon")} />
                </div>,
                <div onClick={handleIconClick}>
                  <MyIcon className={cx("icon")} type="icon_setting" />
                </div>,
              ]}  
              onClick={()=>linkToPage(item.src)}
            >
              <Meta
                avatar={<Avatar src={item.img} />}
                title={item.title}
                description={
                  <Typography.Paragraph ellipsis={{ rows: 3, suffix: "..." }}>
                    {item.description}
                  </Typography.Paragraph>
                }
              />
            </Card>
          </Col>
        ))}
         <Col span={6}>
          <Card hoverable className={cx("add-wapper")} onClick={show}>
            <MyIcon type="icon_increase" />
            <p>新增</p>
          </Card>
        </Col>
      </Row>
      <Modal
        title="添加列表"
        open={showModal}
        cancelText="取消"
        okText="添加"
        onOk={addList}
        onCancel={hide}
      >
        <Form form={form}>
          <Form.Item label="图片链接" name="img" rules={iRules}>
            <Input />
          </Form.Item>
          <Form.Item label="标题" name="title" rules={tRules}>
            <Input />
          </Form.Item>
          <Form.Item label="描述" name="description" rules={dRules}>
            <Input />
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}
export default CardPage

